<template>
  <div>
    <!-- 轮播图 -->
    <div class="banner">
      <div>
        <el-carousel height="460px" :interval="5000" arrow="always">
          <el-carousel-item v-for="(item, index) in banner" :key="index">
            <img :src="'http://106.15.179.105:3000/' + item.imgPath" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    
    <div class="main">
        <!-- 第一块 -->
      <div class="title">
        <p>手机</p>
      </div>
    
      <div class="box">
        <div class="left">
          <img
            src="http://106.15.179.105:3000/public/imgs/phone/phone.png"
            alt=""
          />
        </div>
        <div class="right">
          <mList :shopList="phone"></mList>
        </div>
      </div>
          <!-- 第二块 -->
      <div class="title1">
        <p>家电</p>
        <ul>
          <li>
            <span @mouseover="applianceMouseOver($event, 1)">热门</span>
          </li>
          <li>
            <span @mouseover="applianceMouseOver($event, 2)">电视影音</span>
          </li>
        </ul>
      </div>
  
      <div class="box">
        <div class="left">
          <img
            data-v-2039645f=""
            src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo1.png"
          />
          <img
            data-v-2039645f=""
            src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo2.png"
            class="mg2"
          />
        </div>
        <div class="righthot">
          <mList :shopList="applianceHotList"></mList>
        </div>
        <!--  <div class="righthot">
          <mList :shopList="TVListList"></mList>
        </div> -->
      </div>
      <!-- 第三块 -->
      <div class="title1">
        <p>配件</p>
        <ul>
          <li>
            <span @mouseover="partsMouseOver($event, 1)">热门</span>
          </li>
          <li>
            <span @mouseover="partsMouseOver($event, 2)">保护套</span>
          </li>
          <li>
            <span @mouseover="partsMouseOver($event, 3)">充电器</span>
          </li>
        </ul>
      </div>
      <div class="box">
        <div class="left">
          <img
            data-v-2039645f=""
            src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo1.png"
            alt=""
          />
          <img
            data-v-2039645f=""
            src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo2.png"
            alt=""
          />
        </div>
        <div class="righthot">
          <mList :shopList="partsHot"></mList>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import main from "../API/index";
export default {
  name: "Father",
  data() {
    return {
      banner: {}, //轮播图
      phone: {}, //商品列表
      applianceList: [], //家电热门数据
      applianceActive: 1, //当前选择的分类表示 //热门家电 1:热门数据 2:电视
      partsActive: 1, //配件分类 1热门  2保护套 3充电器
      TVListList: [], //电视数据
      partsList: [], //配件热门数据
      coverList: [], //保护套
      chargerList: [], //充电器

      applianceHotList: [], //家电热门数据(渲染用
      partsHot: [], //配件热门数据(渲染用
    };
  },
  props: [], //接收父组件传过来的值
  components: {},
  mounted() {
    //调用轮播图
    this.getBanner();
    this.getShop("phone", { categoryName: "手机" }); //调用手机
    this.getShop(
      "applianceHotList",
      { categoryName: ["电视机", "空调", "洗衣机"] },
      true
    ); //调用热门数据
    this.getShop("TVListList", { categoryName: "电视机" }); //调用电视机数据
    this.getShop(
      "partsHot",
      { categoryName: ["保护套", "保护膜", "充电器", "充电宝"] },
      true
    ); //调用配件数据
    this.getShop("coverList", { categoryName: "保护套" }); //调用保护套数据
    this.getShop("chargerList", { categoryName: "充电器" }); //调用充电器数据
  },
  methods: {
    /*  /resources/carousel*/
    //获取轮播图数据
    async getBanner() {
      const { data: res } = await main.getBanner();
      /*   console.log(res); */
      this.banner = res.carousel;
    },
    //获取商品数据
    async getShop(dataName, data, hotFlag) {
      if (hotFlag) {
        var { data: res } = await main.getAppliances(data);
      } else {
        var { data: res } = await main.getShop(data);
      }
      this[dataName] = res.Product;
    //  console.log(res); 
    },
    applianceMouseOver(e, val) {
      //家电 1热门  2电视
      this.applianceActive = val;
    },
    partsMouseOver(e, val) {
      /* 
      配件 
      1代表热门  
      2代表保护套  
      3代表充电器 */
      this.partsActive = val;
    },
  },

  watch: {
    applianceActive(val) {
      //监听鼠标滑过改变active的值，判断是哪个对象
      if (!this.applianceList.length) {
        //鼠标没有划过时，默认显示
        this.applianceList = this.applianceHotList;
      }
      this.applianceHotList = val === 1 ? this.applianceList : this.TVListList;
    },
    partsActive(val) {
      //监听鼠标滑过改变active的值，判断是哪个对象
      if (!this.partsList.length) {
        //鼠标没有划过时，默认显示
        this.partsList = this.partsHot;
      }
      let curData = null;
      switch (val) {
        case 1:
          curData = this.partsList;
          break;
        case 2:
          curData = this.coverList;
          break;
        case 3:
          curData = this.chargerList;
          break;
      }
      this.partsHot = curData;
    },
  },
};
</script>

<style lang='scss' scoped>
div {
  width: 100%;
  .banner {
    width: 1225.5px;
    align-items: center;
    margin: 0 auto;
    background: white;
    .el-carousel {
      width: 100%;
      margin: 0 auto;
      margin-top: 20px;
      padding-bottom: 20px;
      img {
        width: 100%;
      }
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      margin: 0;
    }
  }
  .main {
    width: 100%;
    min-height: 2390px;
    background: #f5f5f5;
    margin-top: 20px;
   /*  margin: 0 auto; */
    .title {
      width: 80%;
      font-size: 22px;
      color: #333333;

      p {
        width: 100%;
        margin-left: 170px;
        padding-top: 20px;
        font-size: 22px;
        font-weight: 200;
        line-height: 58px;
      }
    }
    .box {
      width: 1225px;
      display: flex;
      justify-content: space-around;
      margin: 0 auto;
      .left {
        width: 234px;
      }
      .right {
        flex: 1;
      }
      .righthot {
        flex: 1;
      }
    }
    .title1 {
      display: flex;
      justify-content: space-around;
      p {
        width: 100%;
        margin-left: 170px;
        padding-top: 20px;
        font-size: 22px;
        font-weight: 200;
        line-height: 58px;
      }
      ul {
        width: 450px;
        display: flex;
        margin-right: 30px;
        align-items: center;
        li {
          list-style: none;
          margin-left: 30px;
          .appliance {
            margin-top: 30px;
          }
          span {
            padding: 5px;
          }
        }
        li span:hover {
          color: #ff6700;
          border-bottom: 3px solid #ff6700;
        }
      }
    }
  }
}
</style>